<template>
  <div class="box" v-if="movedetail">
    <van-nav-bar
      :title="movedetail.name"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="image">
    <img :src="movedetail.poster" style="width:100%"/>
    </div>

    <div class="film-detail">
    <div class="col">
    <div class="filmname">
    <span class="titlename">{{movedetail.name}}</span>
    <span class="titleitem">{{movedetail.item.name}}</span>
    </div>
    <div class="filmgrade" v-if="movedetail.grade">
    <span class="grade">{{movedetail.grade}}</span>
    <span class="gradetext">分</span>
    </div>
    </div>

    <div class="film-category">{{ movedetail.category }}</div>
    <div class="film-premiere-time">{{ movedetail.premiereAt | dateFilter }} 上映</div>
    <div class="film-address">{{ movedetail.nation }}</div>
    <div class="film-texth">{{ movedetail.synopsis }}</div>
    <div class="toggle">
    <img ref="arrowupper" src="../assets/images/arrow.png"/>
    </div>
    </div>

    <actors :movedetail="movedetail"/>
    <photos :movedetail="movedetail"/>

    <div class="select-ticket" @click="$router.push('/cinema')">选座购票</div>
  </div>
</template>

<script>
import http from '../request/http'
import moment from 'moment'
import actors from './actors'
import photos from './photos'
export default {
  name: "Detail",
  data(){
      return {
          movedetail:null,
      }
  },
  methods:{
      onClickLeft(){
          this.$router.back()
      },
  },
  filters:{
      dateFilter(date){
          return moment(date * 1000).format('YYYY-MM-DD')
      }
  },
  components:{
      actors,
      photos
  },
  mounted(){
      http({
      url: `gateway?filmId=${this.$route.params.myid}&k=3869895`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      if (res.status == 0) {
        let { film } = res.data
        this.movedetail = film
      }
    })
  }
};
</script>
<style scoped>
.box {
  background: #f4f4f4;
  padding-bottom: 60px;
}
.image {
  width: 100%;
  height: 56vw;
  position: relative;
  overflow: hidden;
}
.image img {
  width: 100%;
  position: absolute;
  top: 50%;
  display: block;
  transform: translateY(-50%);
}







.film-detail {
  padding: 15px;
  padding-top: 12px;
  background-color: #fff;
}
.col {
  display: flex;
  justify-content: space-between;
}
.filmname {
  width: 256px;
}
.filmname span {
  vertical-align: middle;
}
.titlename {
  color: #191a1b;
  font-size: 18px;
  height: 24px;
  line-height: 24px;
  margin-right: 7px;
}
.titleitem {
  font-size: 9px;
  color: #fff;
  background-color: #d2d6dc;
  height: 14px;
  line-height: 14px;
  padding: 0 2px;
  border-radius: 2px;
  display: inline-block;
}
.filmgrade {
  width: calc(100% - 250px);
  text-align: right;
  color: #ffb232;
}
.grade {
  font-size: 18px;
  font-style: italic;
}
.gradetext {
  font-size: 10;
}
.film-category {
  font-size: 13px;
  color: #797d82;
  margin-top: 8px;
}
.film-premiere-time {
  font-size: 13px;
  color: #797d82;
  margin-top: 8px;
}
.film-address {
  font-size: 13px;
  color: #797d82;
  margin-top: 8px;
}
.film-texth {
  height: 38px!important;
  overflow: hidden;
  margin-top: 12px;
  font-size: 13px;
  color: #797d82;
  line-height: 19px;
  transition: height .5s ease;
}
.film-text {
  margin-top: 12px;
  font-size: 13px;
  color: #797d82;
  line-height: 19px;
}
.toggle {
  text-align: center;
  display: block;
  height: auto;
  width: 20px;
  margin: auto;
  line-height: normal;
}
.toggle img {
  width: 8px;
  margin: auto;
}
.arrowupper {
  transform: rotate(180deg);
}





.select-ticket {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 49px;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
  z-index:999;
}
</style>
